<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>popup</title>
		<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script>
	</head>

	<body>
		<div data-role="page">
			<div data-role="header">
				<h1>header</h1>
			</div>
			<div data-role="main" class="ui-content">
				<a href="#popup" data-rel="popup">open</a>
				<div id="popup" data-role="popup">
					<p>弹框----------!</p>
				</div>
				<a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-b">Delete page...</a>

				<!--data-overlay-theme 遮罩主题-->
				<!--data-dismissible="false"不允许点击其他地方关闭-->
				<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
					<div data-role="header" data-theme="a">
						<h1>Delete Page?</h1>
					</div>
					<div role="main" class="ui-content">
						<h3 class="ui-title">Are you sure you want to delete this page?</h3>
						<p>This action cannot be undone.</p>
						<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
						<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
					</div>
				</div>
			</div>
			<div data-role="footer">
				<h1>footer</h1>
			</div>
		</div>
	</body>

</html>